<template>
  <div>
    <div :id="ganttId" style="width:100%; height:75vh;" />
  </div>
</template>

<script>
import { gantt } from './gantt-pro.min.js'

export default {
  name: 'Gantt',
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [] }
      }
    },
    ganttId: {
      type: String,
      default() {
        return 'gantt_here'
      }
    },
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {

    }
  },
  computed: {
    newList() {
      return this.dataList
    }
  },
  created() {},
  mounted() {
    this.initGantt()
  },
  methods: {
    initGantt() {
      gantt.clearAll()
      gantt.i18n.setLocale('cn')
      gantt.plugins({
      })

      // 设置用于从数据集中解析数据并将日期发送回服务器的日期格式
      gantt.config.date_format = '%Y-%m-%d %H:%i'
      // gantt.config.date_format = "%Y-%m-%d";

      // 允许拖动重新排序
      gantt.config.order_branch = true

      gantt.config.min_column_width = 40

      // 只读
      gantt.config.readonly = true

      // 滚动条
      gantt.config.scroll_size = 10

      gantt.config.redo = true

      // 控制表头部分的高度
      gantt.config.scale_height = 80

      // 列的最小宽度
      // gantt.config.min_column_width = 60;

      // 行的高度
      gantt.config.row_height = 33

      // 连线
      gantt.config.drag_links = false

      // 可以通过拖放来调整任务大小
      gantt.config.drag_resize = false

      // 可以通过拖动进度旋钮来更改任务进度
      gantt.config.drag_progress = false

      // 把日期变成周
      function toWeek(d) {
        const dateList = ['日', '一', '二', '三', '四', '五', '六']
        return dateList[new Date(d).getDay()]
      }

      // 设置甘特图的时间表头
      gantt.config.scales = [
        {
          unit: 'year', step: 1, format: function(date) {
            var formatFunc = gantt.date.date_to_str('%Y')
            var newDate = formatFunc(new Date(date))
            return newDate + '年'
          }
        },
        {
          unit: 'month', step: 1, format: function(date) {
            var formatFunc = gantt.date.date_to_str('%M')
            var newDate = formatFunc(new Date(date))
            return newDate
          }
        },
        // {
        //   unit: 'week', step: 1, format: function(date) {
        //     var formatFunc = gantt.date.date_to_str('%Y-%m-%d')
        //     var lastDate = formatFunc(gantt.date.add(new Date(date), 6, 'day'))
        //     var firstDate = formatFunc(new Date(date))
        //     return firstDate + ' -- ' + lastDate
        //   }
        // },
        // {
        //   unit: 'day', step: 1, format: function(date) {
        //     var formatFunc = gantt.date.date_to_str('%d')
        //     var newDate1 = formatFunc(new Date(date))
        //     var newDate = toWeek(date)
        //     return newDate + '(' + newDate1 + ')'
        //     // return newDate
        //   }
        // }
      ]

      function byId(list, id) {
        for (var i = 0; i < list.length; i++) {
          if (list[i].key === id) { return list[i].label || '' }
        }
        return ''
      }
      gantt.serverList('code', [
        { key: '1', label: 'Planning' },
        { key: '2', label: 'Dev' },
        { key: '3', label: 'Testing' }
      ])


      window.clickGridButton =  function (id, action) {
          switch (action) {
              case "edit":
                  gantt.showLightbox(id);
                  break;
              case "add":
                  gantt.createTask(null, id);
                  break;
              case "delete":
                  gantt.confirm({
                      // title: '删除',
                      text: '确定要删除该任务吗？',
                      ok: "确定",
                      cancel: "取消",
                      callback: function (res) {
                          if (res)
                              gantt.deleteTask(id);
                      }
                  });
                  break;
          }
      }

      var colHeader = '<div class="gantt_grid_head_cell gantt_grid_head_add" onclick="gantt.createTask()"></div>'
      var colContent = function (task) {
          // return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil" onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
          //     '<i class="fa gantt_button_grid gantt_grid_add fa-plus" onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
          //     '<i class="fa gantt_button_grid gantt_grid_delete fa-times" onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');

          return (
              '<i class="gantt_button_grid gantt_grid_edit el-icon-edit-outline" onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
              '<i class="gantt_button_grid gantt_grid_delete el-icon-delete" onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
      };


      // 列表项
      gantt.config.columns = [
        { name: 'text', label: '项目名称', tree: false, resize: true, align: 'center', min_width: 192 },
        {
          name: 'code', label: '项目编号', align: 'center', min_width: 100, resize: true, template: function(item) { return byId(gantt.serverList('code'), item.code) } },
        { name: 'level', label: '项目等级', resize: true, tree: false, min_width: 100 },
        { name: 'parent', label: '项目负责人', resize: true, tree: false, min_width: 100 },
        { name: 'end_date', label: '完成时间', resize: true,tree: false, min_width: 100 },
        // {
        //         name: "buttons",
        //         label: colHeader,
        //         width: "*",
        //         align: "center",
        //         template: colContent,
        //         // resize: true
        // }
      ]

      // 重置label
      gantt.locale.labels['section_priority'] = '优先级'
      gantt.locale.labels['section_description'] = '描述'
      gantt.locale.labels['section_start_date'] = '开始时间'
      gantt.locale.labels['section_end_date'] = '结束时间'
      gantt.locale.labels['new_task'] = '新任务！'

      gantt.templates.task_row_class = function(start, end, task) {
        if (task.progress === 0.5) {
          return 'task_row_class'
        }
        if(task.type === 'project'){
          return 'summary-row'
        }
      }

      gantt.templates.grid_row_class = function(start, end, task) {
        if (task.progress === 0.5) {
          return 'grid_row_class'
        }
        if(task.type === 'project'){
          return 'summary-row'
        }
      }
      // 设置进度显示在条上
      gantt.templates.progress_text = function(start, end, task) {
        return "<span style='text-align:left;'>" + task.progress * 100 + '% </span>'
      }

      // 设置甘特图 条形上显示的文字
      gantt.templates.task_text = function() {
        return ''
      }
      // 重置时间格式
      gantt.templates.task_date = function(date) {
        return gantt.date.date_to_str('%Y-%m-%d')(date)
      }

      gantt.attachEvent("onTaskDblClick", function(id,e){
          //any custom logic here
          console.log('双击任务')
          return false;
      });

      gantt.init(this.ganttId)
      gantt.parse({ data: this.newList })
      gantt.render()
      // gantt = null
    },
    clickdd() { // 获取所有项的数据
      console.log(gantt.getDatastore('task'))
    }
  }

}
</script>

<style scoped>
@import './gantt.css';
* {
  box-sizing: border-box;
}

/* 项目的的bar 背景颜色 */
::v-deep .gantt_task_line.gantt_project {
  background-color: #bac42c;
  border: 1px solid #bac42c;
  opacity: 0.4;
}

/* 完成进度的bar的背景色 */
::v-deep .gantt_task_progress {
  text-align: center;
  z-index: 0;
  background: rgba(21, 128, 235, 1);
  box-sizing: border-box;
  color: white;
  font-weight: bold;
}

/* 普通任务的bar的背景色 */
::v-deep .gantt_task_line {
  background-color: rgba(76, 176, 80, 1);
  border: 1px solid rgba(76, 176, 80, 1);
}

::v-deep .summary-row,
.summary-row.odd {
  background-color: #eeeeee;
  font-weight: bold;
}

::v-deep .gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
  background-color: rgba(255, 243, 161, 0.3);
}
::v-deep .gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover {
  background-color: rgba(255, 243, 161, 0.3);
}

::v-deep .grid_row_class,
::v-deep .task_row_class {
  background: rgba(255, 108, 108, 1) !important;
}

::v-deep .gantt_grid_scale,
::v-deep .gantt_task_scale,
.gantt_task_vscroll {
  background-color: #F5F7FA !important;
  font-size: 12px !important;
  color: #666666 !important;
  font-weight: 900!important;
}
::v-deep .gantt_grid_scale .gantt_grid_head_cell {
    color: #666666 !important;
}
::v-deep .gantt_task .gantt_task_scale .gantt_scale_cell {
    color: #666666 !important;
    /* border-right: 1px solid #ebebeb; */
}
::v-deep button :focus {
  outline: 0;
}
</style>
